
<template>
    <hr>
    <h3>customRef的使用</h3>
    <input type="text" v-model="keyWord">
    <h3>{{keyWord}}</h3>
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name: "CustomRef",
        setup() {
            //自定义一个ref——名为：myRef
            // value  是自己传的
            function myRef(value,delay){
                let timer
                // 借助customRef   track追踪  trigger触发  注意他们的执行位置
                return customRef((track,trigger)=>{
                    return {
                        get(){
                            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
                            track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
                            return value
                        },
                        // v-model 自动调set
                        // newValue 新值
                        set(newValue){
                            console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
                            clearTimeout(timer) // 一定要清除
                            // 防抖
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //通知Vue去重新解析模板
                            },delay)
                        },
                    }
                })
            }

            // let keyWord = ref('hello') //使用Vue提供的ref
            let keyWord = myRef('hello',1000) //使用程序员自定义的ref   (就读到了get里面的值)

            return {keyWord}
        }
    }
</script>

